import React, { Component } from 'react';
import {
  Form,
  Button,
  message,
  Checkbox,
  Upload,
  TimePicker,
  Radio,
  Card,
  Switch,
  DatePicker,
  Input,
  Icon,
  InputNumber,
  Select
} from 'antd';
import moment from 'moment'

import { Layout } from 'antd';
import MainHeader from '../../components/header';

import './style.less';

const { Item } = Form;
const RadioGroup = Radio.Group;
const Option = Select.Option;
const { TextArea } = Input;

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

class RegisterPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      imageUrl: ''
    }
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { loading, imageUrl } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: 24,
        sm: 4
      },
      wrapperCol: {
        xs: 24,
        sm: 12
      }
    };

    const offsetLayout = {
      wrapperCol: {
        xs: 24,
        sm: {
          span: 12,
          offset: 4
        }
      }
    };
    return (
      <Layout className="pinlor-common-wrapper">
        <MainHeader />
        <div className="pinlor-common-content">
          <Card title="注册表单">
            <Form>
              <Item label="用户名" {...formItemLayout}>
                {
                  getFieldDecorator('userName', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '用户名不能为空'
                      }
                    ]
                  })(<Input prefix={<Icon type="user" />} placeholder="请输入用户名" />)
                }
              </Item>
              <Item label="密码" {...formItemLayout}>
                {
                  getFieldDecorator('userPwd', {
                    initialValue: '',
                    rules: [
                      {
                        required: true,
                        message: '密码不能为空'
                      }
                    ]
                  })(<Input prefix={<Icon type="lock" />} type="password" placeholder="请输入密码" />)
                }
              </Item>
              <Item label="性别" {...formItemLayout}>
                {
                  getFieldDecorator('sex', {
                    initialValue: '1',
                  })(
                    <RadioGroup>
                      <Radio value="1">男</Radio>
                      <Radio value="0">女</Radio>
                    </RadioGroup>
                  )
                }
              </Item>
              <Item label="年龄" {...formItemLayout}>
                {
                  getFieldDecorator('age', {
                    initialValue: '18',
                  })(<InputNumber />)
                }
              </Item>
              <Item label="当前状态" {...formItemLayout}>
                {
                  getFieldDecorator('state', {
                    initialValue: '2',
                  })(
                    <Select>
                      <Option value="1">咸鱼一条</Option>
                      <Option value="2">风华浪子</Option>
                      <Option value="3">北大才子一枚</Option>
                      <Option value="4">百度FE</Option>
                      <Option value="5">创业者</Option>
                    </Select>
                  )
                }
              </Item>
              <Item label="爱好" {...formItemLayout}>
                {
                  getFieldDecorator('interest', {
                    initialValue: ['2', '5'],
                  })(
                    <Select mode="tags">
                      <Option value="1">游泳</Option>
                      <Option value="2">打篮球</Option>
                      <Option value="3">踢足球</Option>
                      <Option value="4">跑步</Option>
                      <Option value="5">爬山</Option>
                      <Option value="6">骑行</Option>
                      <Option value="7">桌球</Option>
                      <Option value="8">麦霸</Option>
                    </Select>
                  )
                }
              </Item>
              <Item label="是否已婚" {...formItemLayout}>
                {
                  getFieldDecorator('isMarried', {
                    valuePropName: 'checked',
                    initialValue: true,
                  })(<Switch />)
                }
              </Item>
              <Item label="生日" {...formItemLayout}>
                {
                  getFieldDecorator('birthday', {
                    initialValue: moment('2018-08-08'),
                  })(
                    <DatePicker />
                  )
                }
              </Item>
              <Item label="联系地址" {...formItemLayout}>
                {
                  getFieldDecorator('address', {
                    initialValue: '上海市徐汇区漕河泾开发区',
                  })(
                    <TextArea
                      autosize={{
                        minRows: 4,
                        maxRows: 6
                      }} />
                  )
                }
              </Item>
              <Item label="早起时间" {...formItemLayout}>
                {
                  getFieldDecorator('time')(
                    <TimePicker />
                  )
                }
              </Item>
              <Item label="头像" {...formItemLayout}>
                {
                  getFieldDecorator('userImg')(
                    <Upload
                      listType="picture-card"
                      showUploadList={false}
                      action="//jsonplaceholder.typicode.com/posts/"
                      onChange={this.handleChange}>
                      {imageUrl ? <img src={imageUrl} alt="" /> : <Icon type={loading ? 'loading' : 'plus'} />}
                    </Upload>
                  )
                }
              </Item>
              <Item {...offsetLayout}>
                {
                  getFieldDecorator('isRead')(
                    <Checkbox>我已阅读过<a href="###">Pinlor协议</a></Checkbox>
                  )
                }
              </Item>
              <Item {...offsetLayout}>
                {
                  <Button type="primary" onClick={this.handleSubmit}>注册</Button>
                }
              </Item>
            </Form>
          </Card>
        </div>
      </Layout>
    )
  }

  handleChange = (info) => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl => this.setState({
        imageUrl,
        loading: false,
      }));
    }
  }
  handleSubmit = () => {
    const userInfo = this.props.form.getFieldsValue();
    const { userName, userPwd } = userInfo
    message.success(`${userName} 恭喜你，通过验证，当前密码为${userPwd}`)
  }
}

export default Form.create()(RegisterPage);
